<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>产品列表[BT]</title>

    <link rel="shortcut icon" th:href="@{/favicon.ico}"/>
    <link rel="bookmark" th:href="@{/favicon.ico}"/>
    <link th:href="@{/src/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/src/css/font-awesome.min.css}" rel="stylesheet"/>
    <link th:href="@{/src/css/animate.css}" rel="stylesheet"/>
    <link th:href="@{/src/css/style.css}" rel="stylesheet"/>

    <link th:href="@{/src/css/plugins/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet">

</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>产品列表</h5>
                <div class="ibox-tools">
                    <a class="collapse-link">
                        <i class="fa fa-chevron-up"></i>
                    </a>
                </div>
            </div>
            <div class="ibox-content">
                <div class="row row-lg">
                    <div class="col-sm-12">
                        <div class="example">

                            <div id="toolbar" class="btn-group">
                                <button class="btn btn-white" type="button" onclick="showModal('新增产品',null)"><i class="fa fa-plus"></i> 新增</button>
                                <!--<button class="btn btn-white" type="button"><i class="fa fa-pencil"></i> 修改</button>
                                <button class="btn btn-white" type="button"><i class="fa fa-remove"></i> 删除</button>-->
                            </div>

                            <table id="table"></table>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal inmodal" id="modal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content animated bounceInRight">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">关闭</span>
                    </button>
                    <h3 class="modal-title"></h3>
                </div>
                <form action="" method="post" class="form form-horizontal" id="form-validate">
                <div class="modal-body">
                    <div class="form-group hidden"><input type="text" class="form-control" value="" name="proId"></div>
                    <div class="form-group" style="height: 80px;"><label>产品名称：</label> <input type="text" class="form-control" name="proName" value=""></div>
                    <div class="form-group" style="height: 80px;"><label>价格：</label> <input type="text" class="form-control" name="proPrice" value=""></div>
                    <div class="form-group" style="height: 80px;"><label>库存：</label> <input type="text" class="form-control" name="inStock" value=""></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                    <!--<button type="button" class="btn btn-primary" onclick="submit()">提交</button>-->
                    <button type="submit" class="btn btn-primary">提交</button>
                </div>
                </form>
                <iframe style="display: none" id="iframe" name="iframe" src="about:blank"></iframe>
            </div>
        </div>
    </div>

    <!-- 全局js -->
    <script th:src="@{/src/js/jquery.min.js}"></script>
    <script th:src="@{/src/js/bootstrap.min.js}"></script>
    <script th:src="@{/src/js/plugins/layer/layer.min.js}"></script>

    <!-- 自定义js -->
    <script th:src="@{/src/js/content.js}"></script>
    <script th:src="@{/src/js/commons.js}"></script>

    <!-- Bootstrap table -->
    <script th:src="@{/src/js/plugins/bootstrap-table/bootstrap-table.min.js}"></script>
    <script th:src="@{/src/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js}"></script>
    <script th:src="@{/src/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}"></script>

    <!-- jQuery Validation plugin javascript-->
    <script th:src="@{/src/js/plugins/validate/jquery.form.js}"></script>
    <script th:src="@{/src/js/plugins/validate/jquery.validate.min.js}"></script>
    <script th:src="@{/src/js/plugins/validate/messages_zh.min.js}"></script>

    <script>
        $('#table').bootstrapTable({
            method: 'POST',
            url: getContext() + '/btable/list',
            sidePagination: 'server',   // 服务端分页
            pagination: true,   // 显示分页条
            showRefresh: true,  // 显示刷新按钮
            cache: false,
            sortable: true,
            sortName: 'shelfTime',
            sortOrder: 'desc',
            pageList: [],
            contentType: 'application/x-www-form-urlencoded',
            toolbar: '#toolbar',    // 工具栏
            queryParams: function(params){
                params.sqlName = 'getProduct';
                return params;
            },
            columns: [{
                field: 'proId',
                title: '产品ID',
            }, {
                field: 'proName',
                title: '产品名称'
            }, {
                field: 'proPrice',
                title: '价格',
                sortable: true
            }, {
                field: 'inStock',
                title: '库存',
                sortable: true
            }, {
                field: 'shelfTime',
                title: '上架时间',
                sortable: true
            }, {
                field: 'updatedTime',
                title: '更新时间',
                sortable: true
            }, {
                field: 'proId',
                title: '操作',
                align: 'center',
                formatter: function(value, row, index){
                    var html = '<a class="btn btn-white btn-bitbucket" onclick="showModal(\'修改产品\',this)"><i class="fa fa-pencil"></i></a>';
                    html += '&emsp;<a class="btn btn-white btn-bitbucket" onclick="del(\'/proJ/\',' + value + ')"><i class="fa fa-remove"></i></a>';
                    return html;
                }
            }]
        });

        function showModal(title,obj) {
            $(".modal-title").html(title);
            if(null != obj){
                var tds = $(obj).parent().siblings();
                $("input[name='proId']").val(tds[0].innerHTML);
                $("input[name='proName']").val(tds[1].innerHTML);
                $("input[name='proPrice']").val(tds[2].innerHTML);
                $("input[name='inStock']").val(tds[3].innerHTML);
            }
            $('#modal').modal('show');
        }

        $('#modal').on('show.bs.modal', function(){
            // 关键代码，如没将modal设置为 block，则$modala_dialog.height() 为零
            $(this).css('display', 'block');
            var modalHeight = $(window).height() / 2 - $('#modal .modal-dialog').height() / 2;
            $(this).find('.modal-dialog').css({
                'margin-top': modalHeight
            });
        });

        $('#modal').on('hidden.bs.modal', function(){
            var inputs = $(this).find("input[type='text']");
            inputs.each(function () {
                this.value = "";
                $(this).removeClass("error");
            })
            var errors = $(this).find(".error");
            errors.each(function () {
                this.innerHTML = "";
            })
        });

        var myFormSubmit = {
            type : "POST",
            url : getContext() + "/proJ/",
            dataType : "json",
            success : function(data){
                var icon = 100 === data.code? 6:2;
                layer.msg(data.msg,{icon: icon,time:1500},function(){
                    if(100 === data.code){
                        $('#modal').modal('hide');
                        $('#table').bootstrapTable('refresh', null);
                    }
                });
            },
            error : function(xhr, textStatus, errorThrown){}
        };

        $(function(){
            $("#form-validate").validate({
                rules:{
                    proName:{
                        required: true
                    },
                    proPrice:{
                        required: true,
                        number: true
                    },
                    inStock:{
                        required: true,
                        digits: true
                    }
                },
                messages:{
                    proName:{
                        required: "请输入产品名称"
                    },
                    proPrice:{
                        required: "请输入价格",
                        number: "请输入正确的价格"
                    },
                    inStock:{
                        required: "请输入库存",
                        digits: "请输入正确的库存"
                    }
                },
                onkeyup:false,	//是否在敲击键盘时验证，默认true
                focusInvalid:false,	//验证失败的元素获取焦点，默认true
                focusCleanup:true,	//验证失败的元素获取焦点后清楚错误信息，默认false
                success:"valid",
                submitHandler:function(form){
                    document.forms[0].target="iframe";
                    $(form).ajaxSubmit(myFormSubmit);
                }
            });
        })
    </script>

</body>

</html>
